<!-- PROGRESS BAR -->
<base-progress-bar></base-progress-bar>
<!-- / PROGRESS BAR -->

<!-- 全屏布局 -->
<ng-container *ngIf="isFullScreen; else isNotFullScreen">
    <div id="main">
        <div class="container" id="container-1">
            <div class="container" id="container-2">
                <div [basePerfectScrollbarOptions]="{suppressScrollX: true, updateOnRouteChange : true}" basePerfectScrollbar class="container"
                     id="container-3">
                    <!-- CONTENT -->
                    <app-content></app-content>
                    <!-- / CONTENT -->
                </div>
            </div>
        </div>
    </div>
</ng-container>

<!-- layout 布局 -->
<ng-template #isNotFullScreen>
    <!-- VERTICAL LAYOUT 1 -->
    <ng-container *ngIf="baseConfig.layout.style === 'vertical-layout-1'">
        <vertical-layout-1></vertical-layout-1>
    </ng-container>
    <!-- / VERTICAL LAYOUT 1 -->

    <!-- VERTICAL LAYOUT 2 -->
    <ng-container *ngIf="baseConfig.layout.style === 'vertical-layout-2'">
        <vertical-layout-2></vertical-layout-2>
    </ng-container>
    <!-- / VERTICAL LAYOUT 2 -->

    <!-- VERTICAL LAYOUT 3 -->
    <ng-container *ngIf="baseConfig.layout.style === 'vertical-layout-3'">
        <vertical-layout-3></vertical-layout-3>
    </ng-container>
    <!-- / VERTICAL LAYOUT 3 -->

    <!-- HORIZONTAL LAYOUT 1 -->
    <ng-container *ngIf="baseConfig.layout.style === 'horizontal-layout-1'">
        <horizontal-layout-1></horizontal-layout-1>
    </ng-container>
    <!-- / HORIZONTAL LAYOUT 1 -->

    <!-- THEME OPTIONS PANEL -->
    <button (click)="toggleSidebarOpen('themeOptionsPanel')" [ngClass]="{'right-side-panel': baseConfig.layout.sidepanel.position === 'right',
                    'side-panel-hidden': baseConfig.layout.sidepanel.hidden === true}"
            class="warn mat-elevation-z2 theme-options-button"
            mat-icon-button>
        <mat-icon>settings</mat-icon>
    </button>

    <base-sidebar [invisibleOverlay]="true" class="theme-options-sidebar" name="themeOptionsPanel" position="right">
        <base-theme-options></base-theme-options>
    </base-sidebar>
    <!-- / THEME OPTIONS PANEL -->
</ng-template>